<template>
	<div class="icons">
		<swiper :options="swiperOption">
	        <swiper-slide class="icons-list" v-for="(icons,index) in page" :key="index">
	        	<div class="icons-item" v-for="icon in icons" :key="icon.id"> 
	        		<img :src="icon.imgUrl" :alt="icon.title">
	          		<p>{{icon.title}}</p>
	      		</div>
	        </swiper-slide>
	        <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
	</div>
</template>

<script type="text/javascript">
	export default{
			props:["icons"],
		data(){
		return{
			swiperOption:{
				pagination:{
					el:".swiper-pagination"	
				}	
			},
			
		}
	},
	computed:{
		page(){
			let pages =[];
			this.icons.forEach((item,index)=>{
				let idx = Math.floor(index/8);
				if(!pages[idx]) pages[idx]=[];
				pages[idx].push(item);
			});
			//console.log(pages)
			return pages;
		}
	}
}
</script>


<style scoped>
	.icons-list{
		width:100%;
		height:4.3rem;
		overflow: hidden;
	}
	.icons-item{
		width:25%;
		height:0;
		padding-bottom: 25%;
		float:left;
	}
	.icons-item img{
		width:1.1rem;
		height:1.1rem;
		display: block;
		margin:0 auto;
		padding:.2rem 0 .1rem;
	}
	.icons-item p{
		text-align: center;
		color:#212121;
		font-size:.28rem;
	}

</style>